<template>
  <div>
    <h3 align="center">非父子组件的数据传递</h3>
    <div class="content">
      <user :user="user"></user>
      <i class="bi bi-arrow-left-right" style="font-size: 80px; color: aqua"></i>
      <user :user="user2"></user>
    </div>
  </div>
</template>

<script>
import User from './User.vue'
import software2351 from '@/assets/images/a.jpg'
import software2352 from '@/assets/images/b.jpg'
export default {
  data() {
    return {
      user: {
        id: 's2351',
        name: '软件2351',
        img: software2351,
        friend: 's2352',
      },
      user2: {
        id: 's2352',
        name: '软件2352',
        img: software2352,
        friend: 's2351',
      },
    }
  },
  components: {
    User,
  },
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
